<!DOCTYPE html
		PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Unobtrusive jQuery Tooltips</title>

	<script src="../../_jquery/jquery-1.4.2.js"></script>
	<script src="../../pluggie/pluggie.jquery.js" type="text/javascript"></script>
	<script src="../../viewport/viewport.jquery.js" type="text/javascript"></script>
	<script src="../tooltip.pluggie.jquery.js" type="text/javascript"></script>

	<script src="tooltip.example.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="tooltip.example.css" media="all" />

	<style>
		#tt2 {
			position: absolute;
			left: 400px;
			top: 400px;
			}

		#tt3_wrap {
			position: relative;
			}

		#tt3 {
			position: absolute;
			left: 100px;
			top: 100px;
			}

		.tooltip {
			padding: 20px;
			border: 2px solid red;
			background: #fff;
			white-space: nowrap;
			}

		.tt {
			padding: 5px;
			border: 2px solid blue;
			}
	</style>
	<script>
		$(function() {
		$('.tt').tooltip({horizontalOffset: -10, verticalOffset: 10});
		});
	</script>
</head>
<body>
	<h2>Unobtrusive Accessible jQuery Tabs</h2>

	<div id="tt1" class="tt">
		<p>
			This is some text1
		</p>
		<div class="tooltip">
			<p>
				This is the tooltip1
			</p>
		</div>
	</div>

	<div id="tt2" class="tt">
		<p>
			This is some text2
		</p>
		<div class="tooltip">
			<p>
				This is the tooltip2
			</p>
		</div>
	</div>

	<div id="tt3_wrap">
		<div id="tt3" class="tt">
			<p>
				This is some text3
			</p>
			<div class="tooltip">
				<p>
					This is the tooltip3
				</p>
			</div>
		</div>
	</div>


</body>
</html>